<template>
  <PageWrapper>
    <div class="page-box">
      <div :class="`${isMobile ? 'mobile-board-whole' : 'board-whole'}`">
        <boardHeaderVue :fullDom="fullDom" />
        <div class="board-box">
          <div class="c1">
            <!-- <div class="block-box">
              <Corner />
              <div class="block-title">上月耗电</div>
              <div class="block-main c1a">
                <div class="c1a-item" v-for="item in lastMonthData.elec" key="item.classifyName">
                  <div>{{item.classifyName}}</div>
                  <div>
                    {{item.value}}
                    <span>{{item.unit}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="block-box">
              <Corner />
              <div class="block-title">上月用水</div>
              <div class="block-main c1b" id="lastMonthWater"> </div>
            </div>
            <div class="block-box">
              <Corner />
              <div class="block-title">上月燃气</div>
              <div class="block-main c1c" id="lastMonthGas"> </div>
            </div> -->
          </div>
          <div class="c2">
            <div class="c2c">
              <div class="c2c-header">釜运行状态</div>
              <div class="c2c-main">
                <div v-for="(item, index) in fuData" :key="item.code" class="c2c-item">
                  <div class="item-num">{{ index + 1 }}#</div>
                  <a-popover :arrow="false" overlayClassName="board-popover" :title="item.deviceName"
                    placement="topRight">
                    <template #content>
                      <div class="board__nums">
                        <div class="__nums-item">
                          <div>{{item.targetedValues[0].value}}&nbsp;{{item.targetedValues[0].unitName}}</div>
                          <div><span class="iconfont icon-weight"></span></div>
                        </div>
                        <div class="__nums-item">
                          <div>{{item.targetedValues[1]?.value}}&nbsp;{{item.targetedValues[1]?.unitName}}</div>
                          <div><span class="iconfont icon-wenduji"></span></div>

                        </div>
                        <div class="__nums-item">
                          <div>{{item.targetedValues[2]?.value}}&nbsp;{{item.targetedValues[2]?.unitName}}</div>
                          <div><span class="iconfont icon-yaqiang"></span></div>

                        </div>
                        <div class="__nums-item">
                          <div>{{item.targetedValues[3]?.value}}&nbsp;{{item.targetedValues[3]?.unitName}}</div>
                          <div><span class="iconfont icon-shijianxuliepinshuaizhuanhuan-xuanzhong"></span></div>

                        </div>
                      </div>
                    </template>
                    <div :class="`item-icon ${getKettleClass(item.onlineStatus)}`">
                      <span class="iconfont icon-shuaxin1"></span>
                    </div>
                  </a-popover>

                </div>
              </div>
            </div>
            <!-- <div class="c2a">
              <div class="c2a-item c2a1">
                <div class="item-title">电力系统本月累计</div>
                <div class="item-middle">
                  <div>
                    <span class="fontColorBlue iconfont icon-dianli"></span>
                  </div>
                  <div class="item-num fontColorBlue">
                    {{thisMonthData.elec.value}}&nbsp;&nbsp;<span>{{thisMonthData.elec.unit}}</span></div>
                </div>
                <div class="item-bottom">环比上月变化&nbsp;<span>{{thisMonthData.elec.changeRate}}%</span></div>
              </div>
              <div class="c2a-item c2a2">
                <div class="item-title">供水系统本月累计</div>
                <div class="item-middle">
                  <div>
                    <span class="fontColorGreen iconfont icon-gongshui"></span>
                  </div>
                  <div class="item-num fontColorGreen">
                    {{thisMonthData.water.value}}&nbsp;&nbsp;<span>{{thisMonthData.water.unit}}</span></div>
                </div>
                <div class="item-bottom">环比上月变化&nbsp;<span>{{thisMonthData.water.changeRate}}%</span></div>
              </div>
              <div class="c2a-item c2a3">
                <div class="item-title">燃气系统本月累计</div>
                <div class="item-middle">
                  <div>
                    <span class="fontColorRed iconfont icon-ranqi"></span>
                  </div>
                  <div class="item-num fontColorRed">
                    {{thisMonthData.gas.value}}&nbsp;&nbsp;<span>{{thisMonthData.gas.unit}}</span></div>
                </div>
                <div class="item-bottom">环比上月变化&nbsp;<span>{{thisMonthData.gas.changeRate}}%</span></div>
              </div>
            </div> -->
            <div class="c2b">
              <img :src="defaultScence" />
            </div>
            <div class="c2d">
              <div class="c2d-item c2d1">
                <div class="item-img">
                  <img src="./imgs/cpkc.png"/>
                </div>
                <div class="item-text">
                  <div>原材库存</div>
                  <div class="color1"><span>125</span>吨</div>
                </div>
              </div>
              <div class="c2d-item c2d2">
                <div class="item-img">
                  <img src="./imgs/ylkc.png"/>
                </div>
                <div class="item-text">
                  <div>原材库存</div>
                  <div class="color2"><span>125</span>吨</div>
                </div>
              </div>
              <div class="c2d-item c2d3">
                <div class="item-img">
                  <img src="./imgs/kchz.png"/>
                </div>
                <div class="item-text">
                  <div>库存汇总</div>
                  <div class="color3"><span>125</span>吨</div>
                </div>
              </div>
            </div>
          </div>
          <div class="c3">
            <div class="block-box">
              <Corner />
              <div class="block-title">产量</div>
              <div class="block-main c3a">
                <div id="productionFirst"></div>
                <div id="productionSecond"></div>
              </div>
            </div>
            <div class="block-box">
              <Corner />
              <div class="block-title">稼动率</div>
              <div class="block-main c3b" id="utilizationRate"> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { PageWrapper } from '@/components/Page';
import boardHeaderVue from '../comp/boardHeader.vue';
import Corner from '../comp/corner.vue';
import usePie from './usePie';
import useLine from './useLine';
import useBar from './useBar';
import useLineBar from './useLineBar';
import * as Api from '@/api/dataBoard/index.ts';
import useData from './useData';
import defaultScence from '@/assets/images/defaultSence.svg'

let fullDom = '.page-box';
let isMobile = false;
const loading = ref(true);
const { thisMonthData,
  lastMonthData,
  fuData, production } = useData();
let kettleData: any = ref([]);
const getKettleClass = (status: any) => {
  if (status === 1) {
    return 'is-blue';
  }
  if (status === 2) {
    return 'is-green';
  }
  if (status === 3) {
    return 'is-red';
  }
  return 'is-gray';
};
// usePie({
//   id: 'lastMonthWater',
//   data: lastMonthData,
//   key: 'water'
// });
// useLine({
//   id: 'lastMonthGas',
//   data: lastMonthData,
//   key: 'gas'
// });
// useBar({
//   id: 'productionFirst',
//   data: production,
//   key: 'month'
// });
// useBar({
//   id: 'productionSecond',
//   data: production,
//   key: 'history'
// });
// useLineBar({
//   id: 'utilizationRate',
//   data: production,
//   key: 'rate'
// });
setTimeout(() => {
  loading.value = false;
}, 1500);
onMounted(async () => {
  const _kettleData = await Api.getKettleData();
  kettleData.value = _kettleData;
});
</script>
<style lang="less" scoped>
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.page-box {
  height: calc(100vh - 115px);
  overflow: auto;
  background: #0e1d30;
}

.board-whole {
  min-width: 1600px;
  height: 100%;
  min-height: 1050px;
  padding: 0 10px;

  .board-box {
    display: flex;
    box-sizing: border-box;
    height: calc(100% - 100px);
    padding-top: 10px;
    padding-bottom: 10px;

    .c1 {
      display: grid;
      grid-row-gap: 20px;
      grid-template-rows: 300px 1fr;
      flex-shrink: 0;
      width: 400px;
    }

    .c2 {
      display: grid;
      grid-row-gap: 20px;
      grid-template-rows: 300px 410px 1fr;
      flex-grow: 1;
      flex-shrink: 0;
      margin: 0 20px;
    }

    .c3 {
      display: grid;
      grid-row-gap: 20px;
      grid-template-columns: 1fr;
      grid-template-rows: 590px 1fr;
      flex-shrink: 0;
      width: 450px;
    }
  }

  .block-box {
    position: relative;
    box-sizing: border-box;
    border: 1px solid rgb(93 173 205 / 35%);
    background: linear-gradient(180deg, rgb(1 49 85 / 65%) 0%, rgb(1 49 85 / 35%) 100%);
  }

  .block-title {
    height: 40px;
    background: linear-gradient(90deg, rgb(33 61 95 / 60%) 0%, rgb(33 61 95 / 0%) 100%);
    color: #fff;
    line-height: 40px;
    text-align: center;
  }

  .c1a {
    display: grid;
    box-sizing: border-box;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 90px 90px;
    padding: 10px;

    .c1a-item {
      box-sizing: border-box;
      background: #0067cc;
      text-align: center;

      >div:first-child {
        margin-top: 20px;
        color: #22eddc;
        font-size: 18px;
      }

      >div:last-child {
        margin-top: 10px;
        color: #fff;
        font-size: 20px;
      }

      span {
        font-size: 12px;
      }
    }
  }

  .c1b,
  .c1c {
    box-sizing: border-box;
    height: calc(100% - 40px);
  }

  .c3a,
  .c3b {
    box-sizing: border-box;
    height: calc(100% - 40px);
  }

  .c2a {
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100%;

    .c2a1 {
      background: linear-gradient(180deg,
          rgb(4 37 90 / 100%) 0%,
          rgb(4 37 90 / 100%) 0%,
          rgb(16 35 87 / 100%) 68%,
          rgb(2 61 101 / 100%) 100%,
          rgb(2 61 101 / 100%) 100%);
    }

    .c2a2 {
      background: linear-gradient(180deg,
          rgb(4 37 90 / 100%) 0%,
          rgb(4 37 90 / 100%) 0%,
          rgb(16 52 77 / 100%) 68%,
          rgb(18 69 68 / 100%) 100%,
          rgb(18 69 68 / 100%) 100%);
    }

    .c2a3 {
      background: linear-gradient(180deg,
          rgb(4 37 90 / 100%) 0%,
          rgb(4 37 90 / 100%) 0%,
          rgb(36 38 87 / 100%) 68%,
          rgb(59 51 100 / 100%) 100%,
          rgb(59 51 100 / 100%) 100%);
    }

    .c2a-item {
      padding: 10px;
      border-radius: 5px;
      color: #fff;

      .item-title {
        padding: 10px 0;
        font-size: 18px;
        text-align: center;
      }

      .item-middle {
        display: flex;
        align-items: center;

        .iconfont {
          display: block;
          font-size: 58px;
        }

        .fontColorBlue {
          color: #03d9eb;
        }

        .fontColorGreen {
          color: #00c702;
        }

        .fontColorRed {
          color: #dd3159;
        }

        >div:first-child {
          width: 60px;
          height: 60px;
        }

        .item-num {
          flex: 1;
          margin-left: 20px;
          font-size: 28px;

          span {
            font-size: 20px;
          }
        }
      }

      .item-bottom {
        margin-top: 10px;
        font-size: 12px;
        text-align: center;

        span {
          font-size: 18px;
        }
      }
    }
  }

  .c2d {
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100%;

    .c2d1 {
      background: linear-gradient(180deg, rgb(4 37 90 / 100%) 0%, rgb(4 37 90 / 100%) 0%, rgb(16 35 87 / 100%) 68%, rgb(2 61 101 / 100%) 100%, rgb(2 61 101 / 100%) 100%);
    }

    .c2d2 {
      background: linear-gradient(180deg, rgb(4 37 90 / 100%) 0%, rgb(4 37 90 / 100%) 0%, rgb(36 38 87 / 100%) 68%, rgb(59 51 100 / 100%) 100%, rgb(59 51 100 / 100%) 100%);
    }

    .c2d3 {
      background: linear-gradient(180deg, rgb(4 37 90 / 100%) 0%, rgb(4 37 90 / 100%) 0%, rgb(36 38 87 / 100%) 68%, rgb(59 51 100 / 100%) 100%, rgb(59 51 100 / 100%) 100%);
    }

    .c2d-item {
      display: flex;
      padding: 10px;
      border-radius: 5px;
      color: #fff;

      .item-img{
        display: flex;
        align-items: center;

        img{
          width: 72px;
        }
      }

      .item-text{
        margin-top: 30px;
        margin-left: 10px;
        color: #fff;
        font-size: 28px;

        >div:last-child{
          margin-top: 10px;
        }

        span{
          font-size: 36px;
        }

        .color1{
          color: #03D9EB
        }

        .color2{
          color: #F59A23;
        }

        .color3{
          color: #70B603;
        }
      }

    }
  }

  .c2b {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgb(0 0 0 / 20%);

    img {
      width: 100%;
      height: 100%;
    }
  }

  .c2c {
    position: relative;
    padding: 40px 20px 20px;
    background: rgb(0 0 0 / 20%);

    .c2c-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      color: #fff;
      font-size: 18px;
      line-height: 40px;
      text-align: center;
    }

    .c2c-main {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(auto-fill, 120px);
      height: 100%;
    }

    .c2c-item {
      padding: 10px 20px 0;

      .item-num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 100%;
        background: #03d9eb;
        color: #333;
      }

      .item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        margin: 3px 0 0 30px;
        border: 4px solid transparent;
        border-radius: 100%;

        &.is-blue {
          border-color: #03d9eb;
          color: #03d9eb;
        }

        &.is-green {
          border-color: #00c702;
          color: #00c702;
        }

        &.is-red {
          border-color: #dd3159;
          color: #dd3159;
        }

        &.is-gray {
          border-color: #dedede;
          color: #dedede;
        }

        .iconfont {
          animation: rotate 3s infinite linear;
          font-size: 30px;
        }
      }
    }
  }

  .c3a {
    >div {
      height: 50%;
    }

    >div:first-child {
      padding-bottom: 10px;
    }

    >div:last-child {
      padding-top: 10px;
    }
  }

}

.mobile-board-whole {
  .board-box {
    display: block;
  }
}
</style>
